<template>
  <div>
    <el-dialog
      :title="boxTitle"
      :visible.sync="isShow"
      @close="cancleUpdate"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
      destroy-on-close
    >
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="勋章图片" prop="medalUrl">
          <div>
            <!-- 上传图片 -->
            <div
              v-if="form.medalUrl"
              class="upload-head"
              @click="editCropper()"
            >
              <img v-bind:src="form.medalUrl" class="cover" />
            </div>
            <div v-else class="upload-head" @click="editCropper()">
              <div>
                <img src="@/assets/images/add.png" class="add" alt="" />
              </div>
              <div>上传图片</div>
            </div>

            <div class="uploadTipbottom">
              注：上传不超过
              <span style="color: red">5MB</span
              >，支持jpg、png、jpeg格式，推荐图片比例1:1
            </div>
          </div>

          <vuecut
            :w="200"
            :h="200"
            url=""
            @coverResult="coverResult"
            title="图片上传"
            :open.sync="vuecutshow"
          ></vuecut>
        </el-form-item>
        <el-form-item label="勋章名称" prop="medalName">
          <el-input
            v-model="form.medalName"
            style="width: 400px"
            maxlength="5"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="勋章简介">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3 }"
            v-model="form.content"
            style="width: 400px"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleUpdate">取 消</el-button>
        <el-button type="primary" @click="confirmUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addMedal, updateMedal } from "../../../api/medal/medal";
export default {
  name: "ZyAdminUpdateMedal",

  data() {
    return {
      isShow: false,
      form: {
        medalId: "",
        medalUrl: "",
        medalName: "",
        content: "",
      },
      rules: {
        medalName: [
          { required: true, message: "请输入勋章名称", trigger: "blur" },
        ],
        medalUrl: [
          { required: true, message: "请上传勋章图片", trigger: "change" },
        ],
      },
      boxTitle: "添加勋章",
      vuecutshow: false,
      isAdd: true,
      oldname: "",
    };
  },
  mounted() {},

  methods: {
    show(row) {
      this.isShow = true;
      if (row) {
        this.isAdd = false;
        this.boxTitle = "编辑勋章";
        this.form.medalId = row.medalId;
        this.form.medalUrl = row.medalUrl;
        this.oldname = row.medalName;
        this.form.medalName = row.medalName;
        this.form.content = row.content;
        this.form.num = row.num;
      } else {
        this.isAdd = true;
        this.boxTitle = "添加勋章";
      }
    },
    // 取消修改
    cancleUpdate() {
      this.form = {
        medalId: "",
        medalUrl: "",
        medalName: "",
        content: "",
      };
      this.isShow = false;
      this.$refs.ruleForm.resetFields();
    },
    // 确认修改
    confirmUpdate() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.isAdd) {
            let res = await addMedal(this.form);
            this.$emit("addSucess", 1);
          } else {
            let data = { ...this.form };
            if (this.form.medalName == this.oldname) {
              delete data.medalName;
            }
            let res = await updateMedal(data);
            this.$emit("addSucess", 2);
          }
          this.cancleUpdate();
        }
      });
    },
    /** 组件返回图片 */
    coverResult(e) {
      this.form.medalUrl = e;
      this.$refs.ruleForm.validateField("medalUrl");
    },
    editCropper() {
      this.vuecutshow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
// 上传图片样式
.upload-head {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 112px;
  height: 112px;
  border-radius: 4px;
  border: 1px dashed rgba(184, 196, 209, 1);

  .add {
    width: 29px;
    height: 29px;
    margin: 25px auto 0 auto;
  }

  div {
    font-size: 14px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-top: 0px;
    width: 100%;
    text-align: center;
  }

  .cover {
    width: 110px;
    height: 110px;
    border-radius: 4px;
  }
}
</style>